<template>
    <div class='container' flex="cross:center main:center">
        <div class="mainCard" flex="cross:top main:justify">
            <div style="width: 40%;height: 100%">
                <homeInfo></homeInfo>
            </div>
            <div class="chartBox">
                <!--   切换按钮     -->
                <div
                    class="switchBtn"
                    flex="cross:center main:center"
                    :class="{'rotate':!chartState}"
                    @click="changeChart" >
                    <span class="iconfont iconqh"></span>
                </div>
                <!--   关系图    -->
                <g2-hierarchy
                    width="100%"
                    height="100%"
                    ref="g2Hierarchy"
                    v-if="!chartState"
                    :treeData="treeData">
                </g2-hierarchy>
                <!--   树状图     -->
                <g6-Tree
                    width="100%"
                    height="100%"
                    ref="g6Tree"
                    v-else
                    :treeData="treeData"></g6-Tree>
            </div>

        </div>
    </div>
</template>

<script>

    import { articleTree } from '@/api/apis/auth.js';
    import homeInfo from '@/components/webHome/homeInfo';
    import g6Tree from '@/components/g6Tree';
    import g2Hierarchy from '@/components/g2Hierarchy';
    export default {

        components: {
            g6Tree,
            g2Hierarchy,
            homeInfo
        },
        data() {
            return {
                treeData:{},
                chartState:false,
            }
        },
        created() {

        },
        mounted() {
            this.statisMind()
        },
        computed: {},
        methods: {
            changeChart(){
                this.chartState = !this.chartState;
                this.$nextTick(()=>{
                    if(!this.chartState){
                        this.$refs.g2Hierarchy.initG2Hierarchy()
                    }else{
                        this.$refs.g6Tree.initG6()
                    }
                })
            },
            statisMind(){
                articleTree({type:'art'}).then(res=>{
                    let { code , data } = res;
                    if( code === 20000) {
                        this.treeData = {
                            id: '文章',
                            name:'文章',
                            children: data
                        };
                        this.$nextTick(()=>{
                            this.$refs.g2Hierarchy.initG2Hierarchy()
                        })

                    }
                })
            },

        },
    }
</script>
<style scoped lang='scss'>
    .container{
        @include boxBase();
        background-color: #24272c;
        .mainCard{
            @include boxBase();
            box-shadow: 0 0 10px #24272c;
            background-image: linear-gradient(to bottom right, #495058, #24272c);
        }
        .chartBox{
            width:80%;
            height:100%;
            position: relative;
            .switchBtn{
                @include boxBase(48px,48px);
                color: #ffffff;
                background-color: rgba(53, 58, 65, 0);
                cursor: pointer;
                position: absolute;
                right: 12px;
                top: 12px;
                z-index: 100;
                border-radius: 50%;
                overflow: hidden;
                box-shadow:1px 2px 10px #1e1e1e;
                transition: all .4s ease-in-out;
                &:after{
                    content: '';
                    display: block;
                    position: absolute;
                    top: -36px;
                    left: -100px;
                    background: #ffffff;
                    width: 16px;
                    height: 125px;
                    opacity: .3;
                    transform: rotate(-45deg);
                }
                &:hover:after {
                    left: 150%;
                    transition: all 800ms cubic-bezier(0.3, 1, 0.2, 1);
                    -webkit-transition: all 800ms cubic-bezier(0.3, 1, 0.2, 1);
                }
            }
            .rotate{
                transform:  rotateY(180deg);
            }
        }
    }
</style>
